<template>
    <div class="comment-reply">
      <!-- 导航栏 -->
      <van-nav-bar :title="comment.reply_count>0 ? `${comment.reply_count}条回复` : '暂无回复'">
        <van-icon
          slot="left"
          name="cross"
          @click="$emit('close')"
        />
      </van-nav-bar>
      <!-- /导航栏 -->
  
     <div class="srcoll-wrap">
         <!-- 当前评论项 -->
        <commentItemVue
            :commentItemS="comment"
        />
        <!-- /当前评论项 -->
    
        <van-cell title="所有回复" />
    
        <!-- 评论的回复列表 -->
        <commentListVue :sourceID="comment.com_id"
            :list="commentList"
            type="c"/>
        <!-- /评论的回复列表 -->
     </div>
  
      <!-- 底部 -->
      <div class="post-wrap">
        <van-button class="post-pl" size="small" round
            @click="isPostShow = true"
        >写评论</van-button>
      </div>
      <!-- /底部 -->

      <!-- 发布评论 -->
      <van-popup v-model="isPostShow" position="bottom">
        <commentPostVue
            :target="comment.com_id"
            @pl_success="onPostSuccess"
        />
      </van-popup>
    </div>
  </template>
  
  <script>
  import commentItemVue from './comment-item.vue';
  import commentListVue from './comment-list.vue';
  import commentPostVue from './comment-post.vue';
  export default {
    name: 'CommentReply',
    components: {
        commentItemVue,
        commentListVue,
        commentPostVue
    },
    props: {
        comment:{
            type:Object,
            required:true
        }
    },
    data () {
      return {
        isPostShow:false,
        commentList:[] //评论的数据
      }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {},
    methods: {
        onPostSuccess(data){
           //更新回复的数据
           this.comment.reply_count++
           //关闭弹层
           this.isPostShow = false
           //将最新回复置顶
           this.commentList.unshift(data.new_obj)
        }
    }
  }
  </script>
  
<style lang="less" scoped>
    .srcoll-wrap{
        position: fixed;
        top: 220px;
        right: 0;
        left: 0;
        bottom: 88px;
        overflow-y: auto;
    }
    .post-wrap{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 88px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-top: 1px solid #d8d8d8;
        .post-pl{
            width: 60%;
        }
    }
</style>
  